<template>
  <div class="page">
    <el-button @click="onClick">刷新</el-button>

    <el-row>
      <el-col :span="12">
        <BaseChart title="销售量"><Chart :option="visitsOption" /></BaseChart>
      </el-col>
      <el-col :span="12">
        <BaseChart title="区域排行"
          ><Chart :option="regionRanking"
        /></BaseChart>
      </el-col>
      <el-col :span="12">
        <BaseChart title="销售额"><Chart :option="salesOption" /></BaseChart>
      </el-col>
      <el-col :span="12">
        <BaseChart title="访问来源"><Chart :option="sourceOption" /></BaseChart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getMenuListAll, getRoleList, getRoleListAll } from "@/api/system";
import BaseChart from "./components/BaseChart.vue";
import Chart from "./components/Chart.vue";
import { getHomeData } from "@/api/home";

export default {
  components: {
    BaseChart,
    Chart,
  },

  data() {
    return {
      // 销量
      visitsOption: {
        tooltip: {
          // trigger: "axis",
          // formatter: "{b}: {c}",
          formatter: (params) => {
            console.log("params", params);
            return `<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:green;\"></span><h1 style="color: red;">我的天, ${params.data}</h1>`;
          },
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // name: "1",
            type: "bar",
            data: [],
            color: {
              type: "linear", // 渐变类型，线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "blue", // 100% 处的颜色
                },
              ],
            },
          },
        ],
      },

      regionRanking: {
        grid: {
          containLabel: true,
        },
        xAxis: {
          type: "value", // value 表示数值轴
          splitLine: { show: false },
          axisLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: [
          {
            type: "category", // category 表示类目轴
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              formatter: (value, index) => {
                // console.log(value, index);
                // console.log("index", index, index === 0);
                const i = index + 1;

                switch (i) {
                  case 1:
                    return `{one|${i}} ${value}`;
                  case 2:
                    return `{two|${i}} ${value}`;
                  case 3:
                    return `{three|${i}} ${value}`;
                  default:
                    return `{base|${i}} ${value}`;
                }

                // if (i === 1) {
                //   return `{one|${i}}${value}`;
                // } else if (i === 2) {
                // } else {
                //   return `{base|${index + 1}} ${value}`;
                // }

                if (i === 1) {
                  return `{one|${index + 1}} ${value}`;
                } else if (i === 2) {
                  return `{two|${i}} ${value}`;
                } else if (i === 3) {
                  return `{three|${i}} ${value}`;
                } else {
                  return `{base|${i}} ${value}`;
                }
              },
              rich: {
                one: {
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 20,
                  backgroundColor: "red",
                },
                two: {
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 20,
                  backgroundColor: "green",
                },
                three: {
                  width: 20,
                  height: 20,
                  align: "center",
                  borderRadius: 20,
                  backgroundColor: "yellow",
                },
                base: {
                  width: 20,
                  height: 20,
                  align: "center",
                },
              },
            },
            data: [],
          },
          {
            type: "category",
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              formatter: (value) => {
                return `转换率：${(value / 80) * 100} %`;
              },
            },
            data: [],
          },
        ],
        series: [
          {
            data: [],
            type: "bar",
            barWidth: 10,
            colorBy: "data",
            // color: ['red', 'green'],
          },
        ],
      },

      salesOption: {
        legend: {
          right: 10,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "当月",
            data: [],
            type: "line",
            areaStyle: {},
          },
          {
            name: "月均",
            data: [],
            type: "line",
            areaStyle: {},
          },
        ],
      },

      sourceOption: {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              // { value: 1048, name: "Search Engine" },
              // { value: 735, name: "Direct" },
              // { value: 580, name: "Email" },
              // { value: 484, name: "Union Ads" },
              // { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },

  methods: {
    async refresh() {
      const { visits, regionRanking, sales, source } = await getHomeData();
      this.visitsOption.xAxis.data = visits.map((item) => item.label);
      this.visitsOption.series[0].data = visits.map((item) => item.value);

      console.log("regionRanking", regionRanking);

      this.regionRanking.yAxis[0].data = regionRanking.map(
        (item) => item.label
      );
      this.regionRanking.yAxis[1].data = regionRanking.map(
        (item) => item.value
      );
      this.regionRanking.series[0].data = regionRanking.map(
        (item) => item.value
      );

      this.salesOption.xAxis.data = sales.map((item) => item.label);
      this.salesOption.series[0].data = sales.map((item) => item.current);
      this.salesOption.series[1].data = sales.map((item) => item.average);

      this.sourceOption.series[0].data = source.map((item) => ({
        value: item.value,
        name: item.label,
      }));
      // this.visitsOption.series[1] = {
      //   type: "line",
      //   data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      // };
    },

    onClick() {
      // this.refresh()

      getMenuListAll();
      getRoleListAll();
    },
  },

  mounted() {
    console.log("首页 mounted");
    this.refresh();
  },

  // mounted() {
  //   console.log("首页 mounted");
  // },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 6px;
  background-color: #eee;

  .el-col-12 {
    padding: 6px;
  }
}
</style>
